<template>
  <div class="account-container">
    <el-row :gutter="20">
      <!-- 左侧商家信息 -->
      <el-col :span="8">
        <el-card shadow="hover" class="info-card">
          <div class="merchant-info">
            <div class="avatar-container">
              <el-avatar :size="80" :src="merchantInfo.avatar" />
            </div>
            <div class="merchant-name">{{ merchantInfo.name }}</div>
            <div class="merchant-type">{{ merchantInfo.type }}</div>
            <div class="merchant-status">
              <el-tag type="success" size="large">{{ merchantInfo.status }}</el-tag>
            </div>
            <div class="merchant-meta">
              <div class="meta-item">
                <el-icon><Calendar /></el-icon>
                <span>{{ merchantInfo.joinTime }} 加入</span>
              </div>
              <div class="meta-item">
                <el-icon><Location /></el-icon>
                <span>{{ merchantInfo.address }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Star /></el-icon>
                <span>信用分数：{{ merchantInfo.creditScore }}分</span>
              </div>
            </div>
            <div class="service-types">
              <div class="service-title">服务类型</div>
              <div class="service-tags">
                <el-tag 
                  v-for="service in merchantInfo.serviceTypes" 
                  :key="service" 
                  class="service-tag"
                  size="small"
                >
                  {{ service }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 安全设置 -->
        <el-card shadow="hover" class="security-card">
          <template #header>
            <span>安全设置</span>
          </template>
          <div class="security-list">
            <div class="security-item">
              <div class="item-info">
                <el-icon><Phone /></el-icon>
                <span>手机号</span>
                <span class="item-value">{{ maskPhone(merchantInfo.phone) }}</span>
              </div>
              <el-button type="primary" link>修改</el-button>
            </div>
            <div class="security-item">
              <div class="item-info">
                <el-icon><Message /></el-icon>
                <span>邮箱</span>
                <span class="item-value">{{ maskEmail(merchantInfo.email) }}</span>
              </div>
              <el-button type="primary" link>修改</el-button>
            </div>
            <div class="security-item">
              <div class="item-info">
                <el-icon><Lock /></el-icon>
                <span>登录密码</span>
                <span class="item-value">已设置</span>
              </div>
              <el-button type="primary" link @click="handleChangePassword">修改</el-button>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧商家资质信息 -->
      <el-col :span="16">
        <el-card shadow="hover" class="certification-card">
          <template #header>
            <div class="card-header">
              <span>商家资质信息</span>
              <el-tag type="success" size="large">已认证</el-tag>
            </div>
          </template>
          
          <!-- 营业执照信息展示 -->
          <div class="license-display">
            <div class="license-info">
              <div class="info-row">
                <div class="info-item">
                  <span class="label">店铺名称：</span>
                  <span class="value">{{ certificationForm.shopName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">店铺类型：</span>
                  <span class="value">企业商户</span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <span class="label">执照编号：</span>
                  <span class="value">{{ certificationForm.licenseNo }}</span>
                </div>
                <div class="info-item">
                  <span class="label">法人代表：</span>
                  <span class="value">{{ certificationForm.legalPerson }}</span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <span class="label">成立日期：</span>
                  <span class="value">{{ certificationForm.establishDate }}</span>
                </div>
                <div class="info-item">
                  <span class="label">营业期限：</span>
                  <span class="value">{{ certificationForm.businessTerm[0] }} 至 {{ certificationForm.businessTerm[1] }}</span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <span class="label">服务类型：</span>
                  <span class="value">
                    <el-tag 
                      v-for="service in certificationForm.serviceTypes" 
                      :key="service" 
                      size="small" 
                      style="margin-right: 8px;"
                    >
                      {{ service }}
                    </el-tag>
                  </span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <span class="label">店铺地址：</span>
                  <span class="value">{{ certificationForm.address }}</span>
                </div>
              </div>
            </div>
            <div class="license-image-display">
              <img :src="certificationForm.licenseImage" alt="营业执照" class="license-preview" />
              <div class="image-status">
                <el-tag type="success" size="small">已认证</el-tag>
              </div>
            </div>
          </div>
          
          <div class="certification-note">
            <el-icon><InfoFilled /></el-icon>
            <span>商家资质信息已通过平台审核认证，如需修改请联系客服</span>
          </div>

          <!-- 退店申请 -->
          <div class="quit-store-section">
            <div class="quit-info">
              <el-icon class="warning-icon"><WarningFilled /></el-icon>
              <div class="quit-content">
                <h4>退店管理</h4>
                <p>如需退出平台，请谨慎操作。退店流程包括申请审核、3个月观察期等步骤。</p>
              </div>
            </div>
            <div class="quit-actions">
              <el-button type="danger" @click="showQuitStoreDialog">
                申请退店
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="400px"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdatePassword">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 退店申请对话框 -->
    <el-dialog
      v-model="quitStoreDialogVisible"
      title="退店申请"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="quit-dialog-content">
        <div class="quit-warning">
          <el-icon class="warning-icon"><WarningFilled /></el-icon>
          <h3>请仔细阅读退店须知</h3>
        </div>
        
        <div class="quit-process">
          <h4>退店流程说明：</h4>
          <el-steps direction="vertical" :active="1">
            <el-step title="提交申请" description="填写退店申请表，说明退店原因" />
            <el-step title="平台审核" description="管理端审核申请，3-5个工作日" />
            <el-step title="观察期" description="审核通过后进入3个月观察期" />
            <el-step title="退店完成" description="观察期无纠纷，正式退店" />
          </el-steps>
        </div>

        <div class="quit-notice">
          <el-alert
            title="重要提醒"
            type="warning"
            :closable="false"
            show-icon
          >
            <template #default>
              <p>1. 退店申请提交后，管理端将在3-5个工作日内审核</p>
              <p>2. 审核通过后进入3个月观察期，期间如有纠纷将无法退店</p>
              <p>3. 观察期内可申请撤销退店，继续正常经营</p>
              <p>4. 观察期结束且无纠纷，将正式完成退店流程</p>
            </template>
          </el-alert>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="quitStoreDialogVisible = false">取消</el-button>
        <el-button 
          type="danger" 
          @click="submitQuitApplication"
        >
          确认提交退店申请
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Calendar,
  Location,
  Lock,
  Phone,
  Message,
  User,
  InfoFilled,
  WarningFilled,
  Star
} from '@element-plus/icons-vue'

// 商家信息
const merchantInfo = reactive({
  avatar: '',
  name: '',
  type: '',
  status: '',
  joinTime: '',
  address: '',
  phone: '',
  email: '',
  serviceTypes: [],
  creditScore: 0
})

// 认证表单
const certificationForm = reactive({
  shopName: '',
  licenseNo: '',
  legalPerson: '',
  establishDate: '',
  businessTerm: [],
  serviceTypes: [],
  address: '',
  licenseImage: ''
})

// 密码修改
const passwordDialogVisible = ref(false)
const passwordFormRef = ref(null)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 退店申请
const quitStoreDialogVisible = ref(false)

const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 修改密码
const handleChangePassword = () => {
  passwordDialogVisible.value = true
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}

const handleUpdatePassword = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    ElMessage.success('密码修改成功')
    passwordDialogVisible.value = false
  } catch (error) {
    console.error('修改密码失败:', error)
  }
}

// 显示退店对话框
const showQuitStoreDialog = () => {
  quitStoreDialogVisible.value = true
}

// 提交退店申请
const submitQuitApplication = async () => {
  try {
    await ElMessageBox.confirm(
      '确认提交退店申请？提交后将进入审核流程，请慎重考虑。',
      '最终确认',
      {
        confirmButtonText: '确认提交',
        cancelButtonText: '再考虑一下',
        type: 'warning'
      }
    )
    
    ElMessage.success('退店申请已提交，管理端将在3-5个工作日内审核')
    quitStoreDialogVisible.value = false
    
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('提交退店申请失败，请重试')
    }
  }
}

// 手机号脱敏
const maskPhone = (phone) => {
  return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
}

// 邮箱脱敏
const maskEmail = (email) => {
  if (!email) return ''
  const [name, domain] = email.split('@')
  return `${name.charAt(0)}***@${domain}`
}

// 页面初始化
onMounted(() => {
  console.log('账户中心页面已加载')
})
</script>

<style scoped>
.account-container {
  padding: 20px;
}

.info-card {
  margin-bottom: 20px;

  .merchant-info {
    text-align: center;

    .avatar-container {
      margin-bottom: 16px;
    }

    .merchant-name {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 8px;
    }

    .merchant-type {
      font-size: 14px;
      color: #606266;
      margin-bottom: 8px;
    }

    .merchant-status {
      margin-bottom: 16px;
    }

    .merchant-meta {
      .meta-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 8px;
        color: #606266;

        .el-icon {
          font-size: 16px;
        }
      }
    }

    .service-types {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #f0f0f0;

      .service-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
        font-weight: 500;
        text-align: center;
      }

      .service-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;

        .service-tag {
          margin: 0;
        }
      }
    }
  }
}

.security-card {
  .security-list {
    .security-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .item-info {
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          font-size: 18px;
          color: #909399;
        }

        .item-value {
          color: #909399;
          margin-left: 8px;
        }
      }
    }
  }
}

.certification-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 营业执照展示样式 */
  .license-display {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;

    .license-info {
      flex: 1;

      .info-row {
        display: flex;
        gap: 30px;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .info-item {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        min-width: 200px;

        .label {
          font-size: 13px;
          color: #6b7280;
          margin-bottom: 4px;
        }

        .value {
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }
      }
    }

    .license-image-display {
      width: 200px;
      text-align: center;

      .license-preview {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
      }

      .image-status {
        margin-top: 8px;
      }
    }
  }

  .certification-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 6px;
    border-left: 4px solid #3b82f6;

    .el-icon {
      color: #3b82f6;
      font-size: 16px;
    }

    span {
      font-size: 13px;
      color: #1e40af;
    }
  }

  /* 退店申请样式 */
  .quit-store-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
    margin-top: 20px;

    .quit-info {
      display: flex;
      gap: 15px;
      flex: 1;

      .warning-icon {
        color: #dc2626;
        font-size: 24px;
        margin-top: 2px;
      }

      .quit-content {
        h4 {
          margin: 0 0 8px 0;
          color: #dc2626;
          font-size: 16px;
        }

        p {
          margin: 0;
          color: #7f1d1d;
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }

    .quit-actions {
      margin-left: 20px;
    }
  }
}

/* 退店对话框样式 */
.quit-dialog-content {
  .quit-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    background: #fef2f2;
    border-radius: 8px;
    border-left: 4px solid #dc2626;

    .warning-icon {
      color: #dc2626;
      font-size: 24px;
    }

    h3 {
      margin: 0;
      color: #dc2626;
      font-size: 16px;
    }
  }

  .quit-process {
    margin-bottom: 20px;

    h4 {
      margin: 0 0 15px 0;
      color: #1f2937;
      font-size: 14px;
    }
  }

  .quit-notice {
    margin-top: 20px;

    :deep(.el-alert__content) {
      p {
        margin: 3px 0;
        font-size: 13px;
        line-height: 1.4;
      }
    }
  }
}

:deep(.el-card__header) {
  background: #fafbfc;
  border-bottom: 1px solid #e5e7eb;
}

:deep(.el-steps) {
  margin: 20px 0;
}
</style>
